<template>
  <div class="v-editor-select">
    <MDropdown :disabled="row.readonly || isModelDisabled" lazy :loadListCallback="loadOptions">
      <div class="g-jc-sb g-pd-l-8 g-pointer">
        <div class="g-flex-1">
          {{locale.getTByKey(selectedValue, selectedValue)}}
        </div>
        <div v-if="selected && !row.readonly && !isModelDisabled" class="g-flex-0 g-pd-lr-4">
          <img src = 'statics/icons/app/iconlist2.png' @click="handleClick">
        </div>
      </div>
      <template #dropdown>
        <MDropdownMenuItem v-for="item in options" :key="item.value" class="g-one-line "  @click="handleClickItem(item)">
          {{locale.getTByContent(item, item.label, {en: 'enLabel', zhCn: 'label'})}}
        </MDropdownMenuItem>
      </template>
    </MDropdown>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, Ref, inject } from "vue";
import { ModelValue, PropertyDropdownOption, PropertyRow } from "../../types";
import { propertyUtil } from "../../PropertyUtil";
import { BusEvent, PropertyKey } from "@/constants/Enums";
import MDropdown from '@/common/dropdown/Dropdown.vue';
import MDropdownMenuItem from '@/common/dropdown/DropdownMenuItem.vue';
import { locale } from "@/util/locale";
import { modelService } from "@/modules/model/service";
import { useLoadItemsOptions } from "../common/useLoadOptions";

const isModelDisabled = inject('isModelDisabled') as Ref<boolean>;

/**
 * 普通下拉选择，处理枚举型属性的拉下选择 比如属性的可见性 visibility
 */
const props = defineProps<{
  row: PropertyRow,
  selected?: boolean
}>();

const clientY = ref(0);

const handleClick = (target: MouseEvent) => {
  clientY.value = target.clientY;
};
const selectedValue = computed(() => {
  if (props.row.key === PropertyKey.Customization_DiagramTypeFilter_DiagramType && props.row.value) {
    let item = props.row.value as ModelValue;
    let enName = item.id.split("::")[1] || item.name;
    return locale.getTByKey('modelConfig.' + enName, enName);
  }
  const id = (props.row.value as ModelValue)?.id;
  if (id) {
    const name = (props.row.value as ModelValue).name || '';
    return locale.getTByKey('modelIdToName.' + id, name);
    // return (props.row.value as ModelValue).name;
  } else {
    return props.row.value as string;
  }

});

function handleClickItem(item: PropertyDropdownOption) {
  // 如果有模型则走常规的编辑，如果没有模型走特殊接口
  if (props.row.modelId) {
    propertyUtil.updatePropertyAndFresh(props.row, item.value);

  } else {
    propertyUtil.updateEventType(app.activeProject!.id, props.row, item.value);

  }

  // 更新属性是共性行为

}

async function loadFn() {
  const projectId = app.activeProject?.id;
  const modelId = props.row.modelId;
  let list:PropertyDropdownOption[];

  list = await modelService.getPropertyItems(projectId!, modelId, props.row.key);

  return list;
}
const { options, loadOptions } = useLoadItemsOptions(props.row, loadFn);

</script>
